<template>
  <div class="youhuiquan">
    <div class="yh_top">
      <tab
        custom-bar-width="30px"
        class='tab'
      >
        <tab-item
          :selected="my_select === 0"
          @on-item-click="tabList(0)"
        >待领优惠券</tab-item>
        <tab-item
          :selected="my_select === 1"
          @on-item-click="tabList(1)"
        >我的优惠券</tab-item>
      </tab>
    </div>

    <div
      class="yh_kong"
      :style="`height:${WinHeight}px;width:${WinWidth}px`"
      ref="slide"
    >
      <div class="slide-group">
        <div
          class="item"
          :style="`height:${WinHeight}px;width:${WinWidth}px`"
        >
          <div
            ref="wrapper"
            v-if="my_select === 0"
            style="height:100%;overflow: hidden;"
          >
            <div>
              <div v-if="my_select == 0">
                <div v-show='kong1'>
                  <kong :type='type1'></kong>
                </div>

                <div
                  class="youhuiquan-box"
                  v-for="(item,index) in Pending"
                  :key='index'
                >
                  <img
                    class="bg"
                    src="http://o6wndwjxn.qnssl.com/9eef5201812181140441905.png"
                    alt=""
                  >
                  <div class="box_item">
                    <div class="box_left_p">
                      <img
                        :src="item.cover"
                        alt=""
                      >
                    </div>
                    <div class="box_right_p">
                      <p class="box_title">{{item.title}}</p>
                      <div class="box_money">¥{{item.preferential_money/100}}</div>
                      <!-- <span>{{item.class_number == null?'0':item.class_number}}次学习</span> -->
                      <section>
                        <div class="quanjiage">
                          <span style="font-size:10px">¥</span>
                          <span>{{item.discount/100}}</span>
                        </div>
                        <div
                          class="bttts"
                          @click="lingqu(item.coupon_id,item.class_id)"
                        >领取使用</div>
                      </section>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div
          class="item"
          :style="`height:${WinHeight}px;width:${WinWidth}px`"
        >
          <div
            ref="wrapper"
            v-if="my_select === 1"
            style="height:100%;overflow: hidden;"
          >
            <div>
              <div v-if="my_select == 1&&kong==false">
                <div v-show='kong2 && Invalids === 0'>
                  <kong :type='type2'></kong>
                </div>
                <div
                  class="youhuiquan-box"
                  v-for="(item,index) in My"
                  :key='index'
                >
                  <img
                    class="bg"
                    src="https://o6wndwjxn.qnssl.com/%E5%B7%B2%E9%A2%86%E5%8F%96%E4%BC%98%E6%83%A0%E5%88%B8.png"
                    alt=""
                  >
                  <div class="my-box-item">
                    <div class="my-box-left-m">
                      <div class="title">{{item.title}}</div>
                      <section class="woshose">还有{{item.g_times}}天过期</section>
                    </div>
                    <div
                      class="my-box-right-m"
                      @click="yhq_Use(item.curriculum_id)"
                    >
                      <div>
                        <span>¥</span>
                        <span>{{item.discount/100}}</span>
                      </div>
                      <div>立即使用</div>
                    </div>
                  </div>
                </div>

                <div v-if='Invalids === 0'>
                  <div
                    class="Invalids_title"
                    @click="Invalid_select()"
                  >查看已失效优惠券</div>
                </div>
                <div v-if='Invalids === 1'>
                  <div
                    class="youhuiquan-box"
                    v-for="(item, index) in Invalid"
                    :key='index'
                  >
                    <img
                      class="bg"
                      src="https://o6wndwjxn.qnssl.com/%E5%A4%B1%E6%95%88%E4%BC%98%E6%83%A0%E5%88%B8@2x.png"
                      alt=""
                    >
                    <div class="box_item">
                      <div class="box_left_s">
                        <div>{{item.title}}</div>
                      </div>
                      <div class="box_right_s">
                        <div>
                          <span>¥</span>
                          <span>{{item.discount/100}}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-if='my_select == 1&&kong==true'>
                <kong :type="type"></kong>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>

    <div
      class="Tips"
      v-show="co_audio_tips_status"
    >
      <Tips :type='co_audio_tips'></Tips>
    </div>
  </div>
</template>

<script>
import {
  Tab,
  TabItem,
  Sticky,
  Divider,
  XButton,
  Swiper,
  SwiperItem,
  LoadMore
} from 'vux'
import BScroll from 'better-scroll'
import { dlcoupons, invalidCoupon, imcoupons } from '@/api/center'
import { obtain_coupons } from '@/api/coursedetails'
import Tips from '@/components/public/Tips.vue'
import kong from '@/components/public/kong.vue'
export default {
  data () {
    return {
      co_audio_tips_status: false,
      co_audio_tips: '领取成功',
      pop_status: false,
      pop_type: '已领',
      kong1: false,
      type1: '待领优惠券',
      kong2: false,
      type2: '已领优惠券',
      select: 0,
      Invalids: 0,
      Pending: [],
      My: [],
      kong: false,
      type: '优惠券',
      Invalid: [],
      page: 1,
      osos: '',
      WinHeight: '',
      WinWidth: '',
      my_select: 0
    }
  },
  components: {
    Tab,
    TabItem,
    Sticky,
    Divider,
    XButton,
    Swiper,
    SwiperItem,
    Tips,
    kong,
    LoadMore
  },
  mounted () {
    this.info()
    this.info1()
    this.$nextTick(() => {
      window.addEventListener('scroll', this.yh_scroll)
      this.WinHeight = document.documentElement.clientHeight - 44
      this.WinWidth = document.documentElement.clientWidth
      this.initTab()
      this.initWrapper()
    })
  },

  beforeDestroyed () {
    window.removeEventListener('scroll', this.yh_scroll)
  },
  watch: {
    osos (v) {
      this.my_select = this.slide.getCurrentPage().pageX
      this.initWrapper()
    }
  },
  methods: {
    yh_scroll () {
      var scroll = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop || 0
      var height = document.body.clientHeight
      var windo = window.innerHeight
      if (scroll == height - windo) {
        this.page++
        if (this.select == 0) {
          this.info(1)
        } else {
          this.info1(1)
        }
      }
    },

    initWrapper () {
      console.log(this.$refs.wrapper)
      this.$nextTick(() => {
        let _this = this
        this.scroll = new BScroll(_this.$refs.wrapper, {
          click: true,
          scrollY: true,
          scrollX: false,
          tap: true,
          bounce: true,
          probeType: 3,
          pullUpLoad: {
            threshold: 100
          }
        })
        this.scroll.on('scroll', function (ob) {
          this.scrollY = ob.y
        })
      })
    },

    initTab () {
      this.$nextTick(() => {
        let _this = this
        this.slide = new BScroll(this.$refs.slide, {
          scrollX: true,
          scrollY: false,
          momentum: false,
          pullUpLoad: {
            threshold: 0
          },
          snap: {
            loop: false,
            threshold: 0,
            speed: 300
          },
          bounce: false,
          stopPropagation: true,
          click: this.click
        })
        this.slide.on('scrollEnd', function (ob) {
          _this.osos = ob.x
        })
      })
    },
    yhq_Use (e) {
      this.$router.push({
        path: '/coursedetails',
        query: {
          curriculumId: e
        }
      })
    },
    lingqu (e, cid) {
      let params = {
        app_id: this.$store.state.app_id,
        user_id: this.$store.state.member_id,
        coupon_id: e
      }
      obtain_coupons(params).then(res => {
        let {
          code,
          data,
          msg
        } = res.data
        if (code === 200) {
          this.pop_status = true
          this.pop_type = '优惠券领取成功'
          this.co_audio_tips_status = true
          setTimeout(() => {
            this.info()
            this.co_audio_tips_status = false
            this.$router.push({
              path: '/coursedetails',
              query: {
                curriculumId: cid
              }
            })
          }, 100)
          this.co_audio_tips_status = false
        } else if (code === -991) {
          this.$vux.alert.show({
            title: '提示',
            content: '您已经领取此优惠券不可重复领取'
          })
        } else {
          this.pop_status = true
          this.pop_type = '已领过该优惠券'
        }
      })
    },
    info (e) {
      let params = {
        app_id: this.$store.state.app_id,
        user_id: this.$store.state.member_id,
        page: this.page,
        pageshow: 10
      }
      dlcoupons(params).then(res => {
        let {
          code,
          data,
          msg
        } = res.data
        this.$store.commit('updateLoadingStatus', { isLoading: false })
        // console.log('待领优惠券', data)
        if (code === 200) {
          this.kong1 = false
          this.Pending = data
        } else {
          if (e == 1) return
          this.kong1 = true
        }
      })
    },
    info1 (e) {
      let params = {
        app_id: this.$store.state.app_id,
        user_id: this.$store.state.member_id,
        page: this.page,
        pageshow: 10
      }
      imcoupons(params).then(res => {
        let {
          code,
          data,
          msg
        } = res.data
        // console.log('我的优惠券', res)
        if (code === 200) {
          this.My = data
          this.kong2 = false
        } else {
          if (e == 1) return
          this.kong2 = true
        }
      })
      this.Invalid_cop()
    },

    tabList (index) {
      this.slide.goToPage(index)
      if (index === 0) {
        this.info()
      } else if (index === 1) {
        this.info1()
      }
    },

    // tab (e) {
    //   this.select = e
    //   this.Pending = []
    //   this.My = []
    //   this.page = 1
    //   if (e === 0) {
    //     this.info()
    //   }
    //   if (e === 1) {
    //     this.info1()
    //   }
    // },
    Invalid_select () {
      this.Invalids = 1
      this.kong2 = false
    },
    pop_click () {
      this.pop_status = false
    },
    Invalid_cop () {
      let requery = {
        app_id: this.$store.state.app_id,
        user_id: this.$store.state.member_id
      }
      invalidCoupon(requery).then(res => {
        let {
          code,
          data
        } = res.data
        // console.log('失效优惠券', res.data.data)
        if (code == 200) {
          if (data.length == 0) {
            this.Invalids = 1
          } else {
            this.Invalid = data
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "../../assets/css/youhuiquan.css";
.yh_kong {
  width: 100%;
  overflow: hidden;
  // margin-top: 44px;
}
.slide-group {
  display: flex;
  width: 200%;
}
.youhuiquan-box {
  margin: 15px;
  height: 80px;
  position: relative;
}
.youhuiquan-box > .bg {
  position: absolute;
  z-index: -1;
  height: 80px;
  width: 100%;
}
.box_item {
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  box-sizing: border-box;
}
.box_left_p {
  flex: 0 0 105px;
}
.box_left_p > img {
  width: 105px;
  height: 58px;
  border-radius: 4px;
}
.box_right_p {
  flex: 1;
  margin-left: 7px;
  position: relative;
}
.box_title {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #333333;
}
.box_money {
  font-family: PingFangSC-Semibold;
  font-size: 11px;
  color: #da4131;
  position: absolute;
  bottom: 0;
}
.box_right_p > section {
  position: absolute;
  right: 5%;
  top: 0;
  height: 100%;
}
.quanjiage {
  font-family: PingFangSC-Regular;
  font-size: 16px;
  color: #da4131;
  text-align: center;
  margin-bottom: 10px;
}
.bttts {
  width: 60px;
  height: 20px;
  line-height: 20px;
  background-color: #da4131;
  font-size: 10px;
  color: #fff;
  font-family: PingFangSC-Regular;
  text-align: center;
  border-radius: 15px;
}
.my-box-item {
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
}
.my-box-item > .my-box-left-m {
  flex: 1;
  position: relative;
}
.my-box-left-m > .title {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #333333;
}
.my-box-left-m > .woshose {
  position: absolute;
  bottom: 0;
  font-family: PingFangSC-Regular;
  font-size: 11px;
  color: #999999;
  letter-spacing: 0.38px;
}
.my-box-right-m {
  flex: 0 0 75px;
  width: 75px;
}
.my-box-right-m > div:first-child {
  color: #fff;
  text-align: center;
  width: 100%;
}
.my-box-right-m > div:first-child > span:first-child {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #ffffff;
  text-align: center;
}
.my-box-right-m > div:first-child > span:last-child {
  font-family: PingFangSC-Regular;
  font-size: 24px;
  color: #ffffff;
  text-align: center;
}
.my-box-right-m > div:last-child {
  text-align: center;
  width: 100%;
  font-size: 10px;
  color: #fff;
  margin-top: 10px;
}
.Invalids_title {
  width: 100%;
  text-align: center;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #999999;
}
.box_left_s {
  flex: 1;
  height: 60px;
  line-height: 60px;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #999999;
}
.box_right_s {
  flex: 0 0 70px;
  text-align: center;
  height: 60px;
  line-height: 60px;
}
.box_right_s > div:first-child > span:first-child {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #999999;
  text-align: center;
}
.box_right_s > div:first-child > span:last-child {
  font-family: PingFangSC-Regular;
  font-size: 24px;
  color: #999999;
  text-align: center;
}
</style>
